<template>
  <div class="area-modal">
    <el-dialog v-model="dialogVisible" :before-close="handleClose" height="40vh">
      <template #header>
        <div class="my-header">
          <div>方案详情</div>
        </div>
      </template>
      <div class="scheme-box">
        <AreaConfigInfo :schemeId="state.schemeId" :zId="state.zId" v-if="state.calcFlag === 0" />
        <RiverConfigInfo :schemeId="state.schemeId" :zId="state.zId" v-if="state.calcFlag === 1" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">确定</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import AreaConfigInfo from './cpns/areaConfigInfo/index.vue'
import RiverConfigInfo from './cpns/riverConfigInfo/index.vue'
import { addArea, getAreaSecList } from '@/services/modules/compute-methods'
const props = defineProps({
  watershedId: {
    type: Number,
    default: 1
  }
})
const ruleFormRef = ref(null)
onMounted(() => {})
const dialogVisible = ref(false)
const addForm = reactive({
  calczName: '',
  calczDesc: '',
  startSec: '',
  endSec: '',
  zoneId: 1
})
const state = reactive({
  secList: [],
  calcFlag: ''
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
//验证
const rules = {
  calczName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
  startSec: [{ required: true, message: '请选择输入预报断面', trigger: 'blur' }],
  endSec: [{ required: true, message: '请选择结束预报断面', trigger: 'blur' }]
}
//保存区域
function handleSave() {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      addForm.startSec = addForm.startSec.join(',')
      addForm.zoneId = props.watershedId
      addArea(addForm).then((res) => {
        if (res.code === 200) {
          handleClose()
          closeDialog()
        }
      })
    } else {
      return
    }
  })
}
//获取所有预报断面
function getSecList() {
  getAreaSecList().then((res) => {
    if (res.code === 200) {
      state.secList = res.data
    }
  })
}
function handleOpenModal(val) {
  dialogVisible.value = true
  state.zId = val.schemeType1
  state.schemeId = val.calcScid
  state.calcFlag = val.calcType
  getSecList()
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
  // ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
}
</style>
